<!DOCTYPE html>
<html style="height: 100%">

	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../css/bootstrap.css" />
		<title>关系图</title>
	</head>

	<body style="height: 100%; margin: 0">
		<header>

			<div>
				<ul class="nav nav-tabs">
					<li role="presentation"><a href="index.html">首页</a></li>
  				<li role="presentation"><a href="humanRelation.html">移动个体时空接触网络分析</a></li>
  				<li role="presentation"><a href="mapOfCovid.html">疫情分布状况分析</a></li>
				 <li role="presentation"><a href="predict.html">疫情传播预测</a></li>
				</ul>
			</div>

		</header>

		层级关系：
		<select id="cengjiguanxi" onchange="chengjiguanxi()">
			<option value="1" selected>1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<!--<option value="5" >5</option>
						<option value="6" >6</option>
						<option value="7" >7</option>
						<option value="8" >8</option>
						<option value="9" >9</option>
						<option value="10" >10</option>-->
		</select>

		<input type="button" value="恢复" onclick="quxiao()">

		<input type="text" id="IamBaidu" name="" onchange="cardNodeQuery()">
		<input type="button" value="关键字搜索" onclick="cardNodeQuery()">

		<div id="container" style="height: 100%"></div>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/echarts.min1.js"></script>
		<script type="text/javascript" src="../js/hashmap.js"></script>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
		<script type="text/javascript">
			//重新设置myChart
			function myChart_setOption(opacityValue) {
				if(opacityValue == null)
					opacityValue = 1
				myChart.setOption({
					series: [{
						roam: true,
						data: hashmapNode.values(),
						edges: hashmapLinks.values(),
						categories: hashmapClassArray,
						lineStyle: {
							"opacity": opacityValue
						}
					}]
				});
			}
			//恢复高亮
			function huifu() {
				if(!ishuifuguo)
					return;
				hashmapNode.values().forEach(function(data) {
					data.itemStyle = {
						"opacity": 1
					};
					//if(data.id==2)
					data.label = {
						"show": true
					};
					//else
					//	data.label={"show":false};

				});
				myChart_setOption();
				ishuifuguo = false;
			}

			//查找card
			function cardNodeQuery() {
				var valu = document.getElementById("IamBaidu").value;
				if(valu == null || valu == "")
					return;
				hashmapNode.values().forEach(function(data) {
					if(data.name != null)
						if(data.name.indexOf(valu) != -1) {
							data.itemStyle = {
								"opacity": 1
							};
							//data.label={"show":true};
						} else {
							data.itemStyle = {
								"opacity": 0.1
							};
							//data.label={"show":false};
						}
				});
				myChart_setOption(0.1);
				ishuifuguo = true;
			}

			var cmdbUrl = 'http://120.55.41.71:9001/cmdbuild';

			function ajxsCmdb(postOrGet, url, values) {  
				$.ajax({

					beforeSend: function(request) {
						request.setRequestHeader("CMDBuild-Authorization", "f3ojeusn9rqb15h0a9laekcsae");
						request.setRequestHeader("CMDBuild-Localization", "zh_CN");
						request.setRequestHeader("CMDBuild-Localized", "true");
					},
					     type: postOrGet, //提交方式 
					     url: cmdbUrl + url, //路径 
					     data: values,
					     success: function(result) { //返回数据根据结果进行相应的处理 
						console.log(result);      
						//if ( result.success ) { 

						      //}
						//return result;
						    
					},
					error: function(XHR, textStatus, errorThrown) {
						console.log(textStatus);
						console.log(errorThrown);
						console.log(XHR);
					}
				});
			}
			//获取单个Card的详情信息，主要取值Card._type
			function getMainCard(className, id) {
				var url = '/services/rest/v2/classes/' + className + '/cards/' + id;
				//return ajxsCmdb('get',url,{"start":0,"filter":"{query:\"\"}","_":"1525751661625"});

				return '{"data":{"Description":"478724103","_type":"Room","_id":104,"Code":"DC01001","UsageType":27,"Notes":null,"Surface":28.00},"meta":{"total":null,"positions":{},"references":{"110":{"description":"Office 03 - Legal Department"},"79":{"description":"Data Center - Floor 1"}}}}';
			}

			function quxiao() {
				myChart.dispatchAction({
					type: 'unfocusNodeAdjacency'
					// 使用 seriesId 或 seriesIndex 或 seriesName 来定位 series.
					//seriesId: params_seriesId
					// 使用 dataIndex 来定位节点。

				});
			}

			//设置层级关系1-10级
			function chengjiguanxi() {
				var valu = document.getElementById("cengjiguanxi").value;

				if(recu == valu)
					return;
				if(recu > valu) {
					//减少nodes
					for(var dome in hashmapNode.returnobj()) {

						var nodes212 = hashmapNode.get(dome);
						console.log(dome);
						if(nodes212 == null || nodes212.recuIndex == null)
							continue;
						if(nodes212.recuIndex > valu)
							hashmapNode.remove(dome);
					}
					//console.log("123"+hashmapNode.values());
				}
				if(recu < valu) {
					//增加nodes
					var recuDm = recu;
					recu = valu;
					hashmapNode.values().forEach(function(data) {
						if(data.recuIndex == recuDm)
							returnCards(data._type, data._id, data._Code, data.recuIndex, data.id);
					});

				}
				recu = valu;
				myChart_setOption();
				//{"nodes":hashmapNode.values(),"links":hashmapLinks.values()};
			}

			//获取CLASS的关系模型
			function getDomains(className) {
				var url = "/services/rest/v2/domains/";

				var valuess = {
					"attribute": {
						"or": [{
							"simple": {
								"attribute": "source",
								"operator": "contain",
								"value": [className]
							}
						}, {
							"simple": {
								"attribute": "destination",
								"operator": "contain",
								"value": [className]
							}
						}]
					}
				};

				//return ajxsCmdb('get',url,valuess);
				return '{"data":[{"name":"RoomAsset","description":"Room asset","_id":"RoomAsset"},{"name":"RoomNetworkPoint","description":"Room network point","_id":"RoomNetworkPoint"},{"name":"FloorRoom","description":"Floor room","_id":"FloorRoom"},{"name":"OfficeRoom","description":"Office room","_id":"OfficeRoom"},{"name":"RoomWorkplace","description":"Room workplace","_id":"RoomWorkplace"}],"meta":{"total":19,"positions":{},"references":{}}}';
			}

			//获取关系Cards的详细信息
			function getDomainCards(domainName, sourceClassName, classname, cid) {
				var url = '/services/rest/v2/classes/Asset/cards';

				var valuess = {
					"relation": [{
						"domain": domainName,
						"type": "oneof",
						"destination": classname,
						"source": sourceClassName,
						"direction": "_2",
						"cards": [{
							"className": classname,
							"id": cid
						}]
					}]
				};
				//return ajxsCmdb('get',url,valuess);

				return '{"data":[{"Description":"517699615","_type":"疑似患者"},{"Description":"484442795","_type":"正常接触者"},{"Description":"481096917","_type":"正常接触者"}],"meta":{"total":3,"positions":{},"references":{"104":{"description":"478724103"}}}}';
			}

			//console.log("aaaaaaaaaa "+diaozhatian);
			function tulishuoming(key, values123) {

				if(hashmapClass.containsKey(key)) {
					return;
				}
				console.log(diaozhatian);
				//hashmapClass.put(data2._type,{"name":data2._type,"symbolSize":10,"symbol":'image://./img/ren.png'});
				hashmapClass.put(key, diaozhatian);
				hashmapClassArray[diaozhatian] = values123;

				diaozhatian++;
			}

			var dom = document.getElementById("container"); // 画板对象
			var myChart = echarts.init(dom); // 力推图对象
			var app = {}; //标题对象
			var recu = 1; // 循环查询的次数
			var indexCordID = 1; //ID增长因子
			option = null;
			app.title = '关系模型'; //设置标题

			var hashmapNode = new HashMap(); //存放node信息 且不重复

			var hashmapLinks = new HashMap(); //存放links信息 且不重复

			var hashmapClass = new HashMap(); //存放图例信息 且不重复

			var hashmapClassArray = new Array(); //存放图例信息 且不重复

			var hashmapClassindex = new HashMap(); //存放图例信息 且不重复

			var mainid = '104'; //

			var MainclassName = '确诊患者'; //

			var params_seriesId;

			var nodesCardsDoMain = {}; //力推图的nodes 和links 集合对象

			var ishuifuguo = false; //判定当前是否全文搜索的高亮效果是否存在
			var diaozhatian = 1; //图例自增涨因子

			getMainCard(MainclassName, mainid);
			//加载第一个节点
			var obj = JSON.parse(getMainCard(MainclassName, mainid));
			//console.log(obj); 

			hashmapNode.put(obj.data.Code, {
				"fixed": false,
				"id": ++indexCordID,
				"name": obj.data.Description,
				"_type": obj.data._type,
				"_id": obj.data._id,
				"label": {
					"show": true
				},
				"_code": obj.data.Code,
				"recuIndex": 0,
				"category": 0,
				"symbol": 'image://../images/ren.png'
			});

			hashmapClass.put(MainclassName, 0);
			hashmapClassArray[0] = {
				"name": MainclassName,
				"symbolSize": 200,
				"symbol": 'image://../images/ren.png'
			};

			returnCards(MainclassName, mainid, obj.data.Code, 0, indexCordID);

			//加载某一个节点的关系类型
			function returnCards(ClassName, cardId, cardCode, recuIndex, mapid) {
				if(recu <= recuIndex)
					return;
				var doamain = JSON.parse(getDomains(ClassName));
				doamain.data.forEach(function(data) {

					var scuorClassName = data._id.replace(ClassName, '');
					var domainCards = JSON.parse(getDomainCards(data._id, scuorClassName, ClassName, cardId));
					domainCards.data.forEach(function(data2) {
						if(hashmapNode.containsKey(data2.Code)) {
							return;
						}
						tulishuoming(data2._type, {
							"name": data2._type,
							"symbolSize": 10,
							"symbol": 'image://../images/ren.png'
						});

						hashmapNode.put(data2.Code + "" + indexCordID, {
							"id": ++indexCordID,
							"name": data2.Description,
							"_type": data2._type,
							"_id": data2._id,
							"_code": data2.Code,
							"recuIndex": recuIndex + 1,
							"label": {
								"show": true
							},
							"category": hashmapClass.get(data2._type),
							"symbol": 'image://../images/ren.png'
						});

						hashmapLinks.put(data2.Code + "" + indexCordID + '_' + cardCode, {
							"source": indexCordID + "",
							"target": mapid + "",
							"value": 1
						});
						returnCards(data2._type, data2._id, data2.Code, recuIndex + 1, indexCordID);
					});
				});
			}
			myChart.showLoading();
			myChart.hideLoading();

			//console.log(hashmapLinks.values());
			var categories = hashmapClassArray;
			var graph = {
				"nodes": hashmapNode.values(),
				"links": hashmapLinks.values()
			};

			graph.nodes.forEach(function(node) {
				//node.itemStyle = null;
				//node.symbolSize = 20;
				node.value = 0; // node.symbolSize;
				// Use random x, y
				///node.label={"show":true};
				node.x = node.y = null;
				// node.category = hashmapClass.get(node._type);
				node.draggable = true;
			});

			option = {
				title: {
					text: '传染病人关系图',
					subtext: 'Default layout',
					top: 'bottom',
					left: 'right'
				},
				tooltip: {},
				legend: [{
					// selectedMode: 'single',
					type: 'scroll',
					data: categories.map(function(a) {
						return {
							name: a.name,
							icon: a.symbol
						};
					})
				}],
				animation: false,
				series: [{
					//name: 'Les Miserables',
					type: 'graph',
					layout: 'force',
					data: graph.nodes,
					links: graph.links,
					categories: categories,
					roam: true,
					//focusNodeAdjacency: true,
					label: {
						normal: {
							position: 'right'
						}
					},
					force: {
						repulsion: 50
					}
				}]
			};
			myChart.setOption(option);
			myChart.on('click', function(params) {
				console.log(params);
				huifu();
				params_seriesId = params.seriesId;
				myChart.dispatchAction({
					type: 'focusNodeAdjacency',
					// 使用 seriesId 或 seriesIndex 或 seriesName 来定位 series.
					seriesId: params.seriesId,
					// 使用 dataIndex 来定位节点。
					dataIndex: params.dataIndex
				});
				//console.log(params.data);
				console.log("ID:" + params.data._id + "  CLASSNAME:" + params.data._type);

			});
			//console.log(myChart);
			if(option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		</script>
	</body>

</html>